<template>
  <div class="common-layout" >

    <el-container>
      <el-aside style="width:auto" >
        <AsideView></AsideView>
      </el-aside>
<!--      style="background-color: #D8E6E7;height: 50px"-->
      <el-container>
        <el-header>
          <HeaderView></HeaderView>
        </el-header>
        <el-main>
          <MainView></MainView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import AsideView from "@/components/viewManage/AsideView.vue";
import HeaderView from "@/components/viewManage/HeaderView.vue";
import MainView from "@/components/viewManage/MainView.vue";
import { useCountStore } from "@/store/menu.js";
import { computed } from "vue";

const store = useCountStore();
const isCollapse = computed(() => store.isCollapse);

// const styleObject = computed(() => {
//   return {
//     width: isCollapse.value ? "58px" : "200px",
//     transition: "all 0.3s" // 这里指定了过渡效果
//   };
// });

 

</script>

<style scoped lang="less">
.aside {
  width: 200px;
  /*position: fixed;*/
  height: calc(100vh);
  /*margin-top: 60px;*/
  text-align: center;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #545c64;
  /*background-color: #d9e1e8;*/
}

.common-layout {
  height: 100%;
  .el-container {
    height: 100%;
  }
}
</style>